<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 1. 什么是函数？
    // 在js中，函数就是将一个代码块放到一个盒子里面
    // 当我们想要执行这个代码块的时候就去执行这个盒子

    // let str = "<table border='1'>";
    // for (let i = 1; i <= 9; i++) {
    //   str += "<tr>"
    //   for (let j = 1; j <= i; j++) {
    //     str += `<td>${i} * ${j} = ${i * j}</td>`
    //   }
    //   str += "</tr>"
    // }
    // str += "</table>";
    // document.write(str);






    // 2. 函数的定义
    // 2.1 声明式定义
    // function createTable() {
    //   let str = "<table border='1'>";
    //   for (let i = 1; i <= 9; i++) {
    //     str += "<tr>"
    //     for (let j = 1; j <= i; j++) {
    //       str += `<td>${i} * ${j} = ${i * j}</td>`
    //     }
    //     str += "</tr>"
    //   }
    //   str += "</table>";
    //   document.write(str);
    // }

    // 2.2 赋值式定义
    // const createTable2 = function() {
    //   let str = "<table border='1'>";
    //   for (let i = 1; i <= 9; i++) {
    //     str += "<tr>"
    //     for (let j = 1; j <= i; j++) {
    //       str += `<td>${i} * ${j} = ${i * j}</td>`
    //     }
    //     str += "</tr>"
    //   }
    //   str += "</table>";
    //   document.write(str);
    // }





    // 3. 函数的调用
    // 不管用哪种方式定义的函数，都是用函数名加小括号的方式进行调用
    // createTable();
    // createTable2();




    // 4. 函数的好处
    // 封装和复用。提高了代码的复用性，简化了代码
    // createTable()
    // createTable()





    // 5. 函数提升
    // let 和 const 是没有变量提升的
    // console.log(b);
    // let b = 1;


    // console.log(a);
    // var a = 1;
    // 浏览器的预解析，上面的代码会编译成下面的样子
    // var a;
    // console.log(a);
    // a = 1;


    // 声明式函数也会提升，将整个函数一起提升
    // console.log(fn); // 函数
    // var fn = "abc";
    // function fn() {};

    // add(); // 没问题
    // function add() {
    //   console.log(123); 
    // }

    // add(); // 报错的
    // var add = function() {
    //   console.log(123);
    // }


    // 声明式的函数可以先调用再定义
    // 赋值式的函数只能先定义再调用

    
  </script>
</body>
</html>